<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>${name_china}管理列表</title>
<%@include file="/common/head.jsp" %>
<style>
.maskback{
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	background:rgba(0,0,0,0.7);
}
.mainback{
    width: 40%;
    height: 250px;
    background: #fff;
    margin: 0 auto;
    margin-top: 17%;
}
</style>
</head>
<body class="iframe-page">
<div class="page-title-wrapper">
    <div class="page-title">
        <div class="page-title-text">
            <span>${name_china}管理</span>
        </div>
        <div id="toolbar" style="float: right"></div>
    </div>
    <div class="page-title-border"></div>
</div>

<div class="search-field">
      <span class="field-cont">
	      <span class="field-cont-title">昵称/ID</span>
	      <input type="text" name="id" id="id" class="summer-input" />
      </span>
      
      <span class="field-cont">
	      <span class="field-cont-title">邀请码</span>
	      <input type="text" class="summer-input"  name="invitingCode" id="invitingCode"/>
      </span>
    <span class="field-cont">
        <span class="field-cont-title">日期</span>
        <input type="text" class="summer-input" id="createTime" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" data-validatebox="validType:['maxLength[50]']"/>
    </span>
    
    <span class="field-cont">
        <span class="field-cont-title">-</span>
        <input type="text" class="summer-input" id="updateTime" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" data-validatebox="validType:['maxLength[50]']"/>    
    </span>
    <span class="field-btn-wrapper">
        <a id="search" class="btn btn-primary btn-icon wave distance-right"><i class="icon icon-search"></i></a>
        <a id="reset" class="btn btn-icon wave wave-dark"><i class="icon icon-refresh"></i></a>
    </span>
</div>

<div id="t-wrap">
    <table class="summer-datagrid" id="dataList">
	    <col width="30%">
	    <col width="20%">
	    <col width="20%">
	    <col width="20%">
	    <col width="30%">
	    <col width="20%">
	    <col width="20%">
	    <thead>
		    <tr>
		        <th>昵称/ID</th>
		        <th>手机号</th>
		        <th>我的邀请码</th>
		        <th>注册时间</th>
		        <th>上级邀请人昵称/ID</th>
		        <th>上级邀请码</th>
		        <th>修改上级</th>
		    </tr>
	    </thead>
    </table>
</div>
<form id="editForm">
<div style="display: none" class="maskback">
     <div class="mainback">
     <div class="form-cont" style="top:40px;">
     <input type="hidden" class="summer-input" id="parentId"/>
     <input type="hidden" class="summer-input" id="currentId"/>
     <p class="form-cont-title">邀请人</p>
     <input type="text" id="name" name="name" class="summer-input summer-validatebox" />
     <a id="searchP" class="btn btn-primary"><i class="icon icon-search"></i></a>
     </div>
     <div class="form-cont" style="top:40px;">
     <p class="form-cont-title">邀请码</p>
     <input type="text" id="code" name="code" class="summer-input" disabled/>
     </div>
     <div class="form-btn-wrapper" id="funcbar" style="margin-top: 100px;">
     <a id="save" href="javascript:;" class="btn btn-ok btn-normal  wave distance-right" >确定</a>
     <a class="btn btn-normal" id="backBtnMark">关闭</a>
     </div>
     </div>	     
</div>
</form>
<script>
	//请求url
	var CONST_URL = {
		LIST: basePath + '${common_url}list',
	   	INIT_ADD: basePath + "${common_url}initAdd",
	   	INIT_EDIT: basePath + "${common_url}initEdit",
	   	INIT_VIEW: basePath + "${common_url}initView",
	   	DEL: basePath + "${common_url}del",
	   	VIEW_LEVEL: basePath + "${common_url}viewLevel",
	   	SETBLACK: basePath + "${common_url}setblack",
	   	PRE_INCOME: basePath + "${common_url}preIncome",
	   	INIT_POINTS: basePath + "${common_url}initPoints",
	   	GET_POINTS: basePath + "${common_url}getPoints",
		INIT_MAIN : basePath + "${common_url}init",
		INVITE_INFO: basePath + "${common_url}inviteView",
		UPDATE_UPER: basePath + "${common_url}updateUper",
		GET_PARENT_CODE: basePath + "${common_url}getParentCode"
	};
	
    var  pData,
    	 permission = CommonUtil.getPermission('${name_english}');
    
    $(function () {
    	
    	pData = ${pData};
    	//蒙版加载数据
    	if(pData != "null"){
    		$("#name").val(pData.userNickName);
    		$("#currentId").val(${currentId});
    		$("#parentId").val(pData.id);
    		$("#code").val(pData.invitingCode);
    		$(".maskback").show();
    	}
    	
        // 新建toobar
		$.funcbar({
			id: 'toolbar',
			type: 'toolbar',
			data: permission,
			permit: ['${name_english}:initAdd']
		});
        
        // 查询按钮
        $('#search').on('click', reloadTable);
        
        //重置按钮
        $('#reset').on('click', function () {
        	//重置文本框的值
        	$('#createTime').val('');
        	$('#updateTime').val('');
        	$('#id').val('');
        	$('#invitingCode').val('');
        	reloadTable();
        });
        
      //编辑
        $('#t-wrap').on('click', 'a[data-permit="${name_english}:initupdateUper"]', function() {
            var $this = $(this),
                id = $this.closest('tr').find('td[data-field="myid"]').attr('data-value');
            $("#currentId").val(id);
            $(".maskback").show();
        });	
       createTable();
       //蒙版查询按钮
       $("#searchP").on('click',getParentCode);
       //蒙版数据保存
       $("#save").on('click',saveSubmit);
       //蒙版关闭
       $("#backBtnMark").click(function(){
    		$(".maskback").hide();
        	window.location.href = CONST_URL.INVITE_INFO; 	
    	});
    });
    //保存修改上级
    function saveSubmit(event){
    	$("#editForm").form({
            ajax: {
                url: CONST_URL.UPDATE_UPER,
                 data:{
       				"currentId" :$("#currentId").val(),
       				"parentId" :$("#parentId").val()
       			 }  
            },
            onSubmitSuccess: function (data) {
           	$.stip({
	                type:'ok',//显示类型 有info、 ok、 danger
	                text: '修改成功！',
	                onBeforeHide: function () {
               	 
	               }
          	});
   		    //隐藏蒙版
       		$(".maskback").hide();
         	 //刷新商品列表
       		reloadTable();
             }
        }).form("submit");
    }
    //根据用户名查找邀请码
    function getParentCode(){
        var name = $("#name").val();
        var currentId = $("#currentId").val();
    	window.location.href = CONST_URL.GET_PARENT_CODE + '?name=' + name+"&currentId="+currentId;
    }
    // 重新加载表格
	function reloadTable() {
		$('#dataList').datagrid('reload',{
            ajax: {
            	param: {
            		"createTime": trimSpace($('#createTime').val()),
            		"updateTime": trimSpace($('#updateTime').val()),
            		"id": trimSpace($('#id').val()),
            		"invitingCode": trimSpace($('#invitingCode').val())
            	}
            }
        });
	}
    
    //创建表格
    function createTable() {
    	$('#dataList').datagrid({
    		ajax: {
    			url: CONST_URL.INVITE_INFO,
    			param: {
    				"createTime": trimSpace($('#createTime').val()),
            		"updateTime": trimSpace($('#updateTime').val()),
            		"id": trimSpace($('#id').val()),
            		"invitingCode": trimSpace($('#invitingCode').val())
            	}
    		},
    		columns: [
    		     {
    		    	 field: 'myid',
    		    	 hidden: true
    		     },
    		     {
    		    	 render: function (rowData) {
    		    		 return '<p>'+ rowData.myname +'</p>'+'<br/>'
    		    		 		+'<p>'+rowData.myid+'</p>';
    		    	 }
    		     },
    		     {
    		    	 field:'myphone'
    		     },
    		     {
    		    	 field: 'mycode'
    		     },
    		     {
    		    	 field: 'mycreateTime'
    		     },
    		     {
    		    	 render: function (rowData) {
    		    		 return '<p>'+ rowData.uperName +'</p>'+'<br/>'
    		    		 		+'<p>'+rowData.uperid+'</p>';
    		    	 }
    		     },
    		     {
    		    	 field: 'uperCode'
    		     },
    		     {
						render : function(rowData) {
							return $.funcbar({
										data : permission, //请求的数据
										type : 'text', //类型
										display : 2, //显示数量
										permit : [
												'${name_english}:initupdateUper'
												 ]
									//需要的权限按钮
									});
						}
					}
    	    ]
    	});
    }   
</script>
</body>
</html>